<template>
  <div v-loading="loading">
    <el-collapse v-model="activePanel" style="width:60rem" accordion>
      <el-collapse-item>
        <template #title>
          <h2 v-if="!activePanel" class="flashing-alert">点击此处，对{{ generateTitle($route.meta) }}筛选</h2>
          <h2 v-else>{{ generateTitle($route.meta) }}</h2>
        </template>
        <el-form label-width="5rem" inline>
          <el-form-item label="操作">
            <el-button type="success" icon="el-icon-plus" @click="handleAdd">添加人员</el-button>
            <el-button type="success" icon="el-icon-refresh" @click="requireRefresh">刷新</el-button>
          </el-form-item>
          <el-form-item label="党内分工">
            <PartyDutySelector v-model="query.duty" :multi="false" :value-range="[0,999]" />
          </el-form-item>
          <el-form-item label="政治面貌">
            <TypeInPartySelector v-model="innerTypeInParty" :multi="false" />
          </el-form-item>
        </el-form>
      </el-collapse-item>
    </el-collapse>
    <Table
      :list="list"
      :data.sync="data"
      :page.sync="page"
      :total-count="totalCount"
      @requireRefresh="requireRefresh"
      @requireEdit="showEditContent = true"
    />

    <el-dialog title="人员信息编辑" :visible.sync="showEditContent">
      <Form :total-count="totalCount" :data.sync="data" @requireRefresh="requireRefresh" />
    </el-dialog>
  </div>
</template>
<script>
import { generateTitle } from '@/utils/get-page-title'
import { getList } from '@/api/zzxt/party-userinfo'
export default {
  name: 'CompanyMembersWithParty',
  components: {
    Table: () => import('./Table'),
    PartyDutySelector: () =>
      import('@/components/Party/PartyDuty/PartyDutySelector'),
    TypeInPartySelector: () =>
      import('@/components/Party/TypeInParty/TypeInPartySelector'),
    Form: () => import('../PartyGroupMemberWithParty/Form')
  },
  data: () => ({
    activePanel: null,
    query: {
      company: null,
      typeInParty: null,
      duty: null
    },
    loading: false,
    list: [],
    data: {},
    laborArray: [],
    showEditContent: false,
    page: { pageIndex: 0, pageSize: 10 },
    totalCount: 0
  }),
  computed: {
    innerTypeInParty: {
      get() {
        return this.query.typeInParty && this.query.typeInParty[0]
      },
      set(val) {
        this.query.typeInParty = [val, val]
      }
    },
    currentCompany() {
      return this.$store.state.user.globalCompany
    }
  },
  watch: {
    page: {
      handler(val) {
        this.refresh()
      },
      deep: true
    },
    query: {
      handler(val) {
        this.refresh()
      },
      deep: true
    },
    currentCompany: {
      handler(val) {
        if (val) this.query.company = val
      },
      immediate: true
    }
  },
  mounted() {
    this.$store.dispatch('party/initDictionary')
    this.refresh()
  },
  methods: {
    generateTitle,
    handleAdd() {
      this.showEditContent = true
      if (!this.data) this.data = {}
    },
    requireRefresh() {
      this.refresh()
      this.showEditContent = false
    },
    refresh() {
      if (this.loading) return
      this.loading = true
      const { query, page } = this
      getList(Object.assign(query, { page }))
        .then(data => {
          this.totalCount = data.totalCount
          this.list = data.list
        })
        .finally(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/animation';
</style>
